<template>
    <div>

        <div class="playList">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="有效链接" name="first">
                    <ul class="chinaUl">
                        <li class="chinaLi"  v-for="(item,index) in chinaItems " :key="index">

                            <el-image
                                    style="{display: block;width:200px;height: 200px;}"
                                    :src="item.img"
                                    :preview-src-list="srcList">
                            </el-image>
                            <div><a :href=item.url>{{ item.title }}</a></div>
                        </li>
                    </ul>


                </el-tab-pane>
                <el-tab-pane label="搞笑" name="second">配置管理</el-tab-pane>
                <el-tab-pane label="视觉" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="发布" name="fourth">
                    <div style="margin: 15px">
                        <el-upload
                                action="123"
                                :before-upload="beforeUploadImg"
                        >
                            <el-button size="small" type="primary">上传图片</el-button>
                        </el-upload>
                        <el-image
                                style="width: 300px; height: 300px;background-color: #888888"
                                :src="uploadImg"
                                :preview-src-list="srcList"

                        >
                        </el-image>
                        <div class="input">
                            <el-input v-model="input" placeholder="输入描述信息"></el-input>
                        </div>
                        <div class="input">
                            <el-input v-model="srcInput" placeholder="输入链接"></el-input>
                        </div>
                        <div class="input">
                            <el-button size="small" type="danger" @click="publish">发布</el-button>
                        </div>


                    </div>

                </el-tab-pane>
            </el-tabs>
        </div>


    </div>
</template>

<script>
    import {uploadImages} from "../../assets/js/imgur";
    import {Message, Loading} from 'element-ui';

    export default {
        name: "PLAY",
        data() {
            return {

                activeName: 'first',
                uploadImg: '',
                dialogVisible: false,
                srcList: [],
                input: '',
                srcInput: '',
                chinaItems: [
                    {title: "hello",img:"https://i.imgur.com/nddDZza.jpg",url:"http://138.128.27.218:80"},



                ]

            }
        },
        mounted() {
            this.getPlayList()
        },
        methods: {

            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = this.dialogImageUrl;
                this.dialogVisible = true;
            },
            beforeUploadImg(file) {
                let _this = this
                let files = []
                files.push(file)
                uploadImages(files).then(
                    res => {
                        res.forEach(
                            item => {
                                let imgurl = item["data"]["data"]["link"];
                                this.uploadImg = imgurl
                                this.srcList.push(imgurl)
                                console.log(this.dialogImageUrl)


                            }
                        )
                    }
                ).catch(err => {
                    console.log(err)
                });

                return false // 返回false不会自动上传

            },
            handleResponse(res) {
                if (res.data.success) {
                    Message({
                        message: res.data.message,
                        type: 'success',
                        duration: 3 * 1000
                    })
                } else {
                    Message({
                        message: res.data.message,
                        type: 'error',
                        duration: 3 * 1000
                    })
                }

            },
            publish() {
                this.$API.publishPlay({
                    title: this.input,
                    img: this.uploadImg,
                    url: this.srcInput,
                }).then(
                    res => {
                        this.handleResponse(res)
                    }
                )

            },
            getPlayList(){
                this.$API.getPlay().then(
                    res=>{
                        this.chinaItems=res.data["data"]
                    }
                )



            }


        }


    }
</script>

<style lang="scss" scoped>
    .publisButton {
        z-index: 1000;
        float: right;

    }

    .playList {
        z-index: 500;
        background-color: white;
        height: 100vh;
        text-align: left;

        .chinaUl {
            display: flex;
            display: -webkit-flex;
            list-style: none;
            /*flex-direction:column;*/
            flex-wrap:wrap;

            .chinaLi {

                margin: 20px;
                background-color: #888888;
                list-style: none;
                /*flex: 1;*/
                text-align: center;
                width: 200px;
                a{
                    line-height: 30px;
                    color: black;
                    font-size: 1.3rem;
                    text-decoration: none;
                    margin: 20px;
                }
                a :hover{
                    line-height: 30px;
                    color: white;
                    font-size: 1.3rem;
                    text-decoration: none;
                    margin: 20px;
                }
            }
        }


        .input {
            width: 45%;
            /*margin-left: 15%;*/
            margin-top: 20px;
        }

    }
</style>
